<template>
    <div class="content">
      <div class="login-content">
        <div class="main">
        </div>
        <div class="login-form">
          <p style="text-align: center">
            <Avatar class="unselect" :src="avatar" :size="150"/>
          </p>
          <p style="text-align: center;margin-top: 10px;color: white;font-size: 30px" class="unselect">
            {{name}}
          </p>
          <Input :autofocus="true" ref="input" style="margin-top: 10px;" :type="passwordType"  v-model="password" placeholder="密码" @keyup.native="clear" @keyup.enter.native="login">
            <div slot="suffix">
              <Icon @click="changeType" :type="iconType" size="28" style="width: 32px"/>
              <Icon @click="login" type="md-arrow-forward" size="28" style="background: #777777;color: white;width: 32px"></Icon>
            </div>
          </Input>
        </div>
        <Icon @click="logout" style="position: absolute;right: 0px;bottom: 0px;margin-right: 20px;margin-bottom: 20px;color: white" size="32" type="md-power" />
      </div>
      <div :class="imgClass" @click="clear">
        <div style="position: absolute;left: 30px;bottom: 60px">
          <p style="color: white;font-size: 100px">{{realTime}}</p>
          <p style="color: white;font-size: 40px">{{realDate}}</p>
        </div>
      </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

import { getLockedPassword, setLocked } from '../../libs/util'
export default {
  name: 'lock',
  data () {
    return {
      realTime: '',
      realDate: '',
      password: '',
      first: true,
      type: true
    }
  },
  computed: {
    lockedPassword () {
      return getLockedPassword()
    },
    passwordType () {
      return this.type ? 'password' : 'text'
    },
    iconType () {
      return this.type ? 'ios-eye-outline' : 'ios-eye-off-outline'
    },
    name () {
      return this.$store.state.user.userName
    },
    avatar () {
      return this.$store.state.user.avatorImgPath
    },
    imgClass () {
      return this.first ? 'bg-img' : 'bg-img slide'
    }
  },
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        setLocked(false)
        this.$router.push({
          name: 'login'
        })
      })
    },
    login () {
      if (!this.first) {
        if (this.password === this.lockedPassword) {
          setLocked(false)
          this.$router.push({
            name: this.$config.homeName
          })
        } else {
          this.password = ''
          this.$Message.error('密码不正确')
        }
      } else {
        this.clear()
      }
    },
    changeType () {
      this.type = !this.type
    },
    clear () {
      if (this.first) {
        clearInterval(this.timer)
        this.first = false
        this.$nextTick(() => {
          this.$refs['input'].focus()
          this.password = ''
        })
      }
    },
    dealWithTime (data) {
      let formatDateTime
      let H = data.getHours()
      let Min = data.getMinutes()
      let S = data.getSeconds()
      H = H < 10 ? ('0' + H) : H
      Min = Min < 10 ? ('0' + Min) : Min
      S = S < 10 ? ('0' + S) : S
      formatDateTime = H + ':' + Min + ':' + S
      return formatDateTime
    },
    dealWithDate (data) {
      let formatDateTime
      let M = data.getMonth() + 1
      let D = data.getDate()
      let W = data.getDay()
      switch (W) {
        case 0:
          W = '天'
          break
        case 1:
          W = '一'
          break
        case 2:
          W = '二'
          break
        case 3:
          W = '三'
          break
        case 4:
          W = '四'
          break
        case 5:
          W = '五'
          break
        case 6:
          W = '六'
          break
        default:
          break
      }
      formatDateTime = M + '月' + D + '日,  ' + '星期' + W
      return formatDateTime
    }
  },
  mounted () {
    // 页面加载完后显示当前时间
    this.realTime = this.dealWithTime(new Date())
    this.realDate = this.dealWithDate(new Date())
    // 定时刷新时间
    let _this = this
    // 定时器
    this.timer = setInterval(function () {
      _this.realTime = _this.dealWithTime(new Date()) // 修改数据date
    }, 1000)
  }
}
</script>

<style scoped>
  .unselect{
    user-select: none;
    -webkit-user-select: none;
  }
  /deep/ .ivu-input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  /deep/ .ivu-input:hover {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  /deep/ .ivu-input {
    border-radius: 0px;
    border: none;
    font-size: 16px
  }
/deep/ .ivu-input-suffix{
  width: 64px;
  height: 32px;
}
.content{
  width: 100%;
  height: 100%;
  position: relative;
}
.bg-img{
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("/image/lock_bg/bg_2.jpg");
  transition: all 1s ease .1s;
}
.slide{
  transform: translateY(-100%);
}
.login-content{
   width: 100%;
   height: 100%;
   position: absolute;
   /*filter: blur(5px);*/
   background: url("/image/lock_bg/bg_2.jpg");
 }
  .main{
    width: 100%;
    height: 100%;
    position: absolute;
    filter: blur(20px);
    opacity: 0.99;
    background: url("/image/lock_bg/bg_2.jpg");
  }
.login-form{
  width: 300px;
  height: 400px;
 position: relative;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}
</style>
